<script lang="ts">
import UploadImage from '@/components/UploadImage/UploadImage.vue'
import {
	toRefs,
	ref,
	reactive,
	computed,
	onBeforeMount,
	onMounted
} from "vue";

export default {
	name: "Test",
	components: {
		UploadImage,
	},
	setup() {
		const startDate = ref(['2022', '06', '01']);
    const endDate = ref(['2023', '06', '01']);

		const data: any = reactive({
			datetimeShow: false, //是否显示日期范围筛选组件
			selectDate: ''
		});
		onBeforeMount(() => {

		});
		
		//点击选择时间
		const clickCalendar = () => {
			data.datetimeShow = true
		};
		
    const onConfirm = () => {
			data.selectDate = `${startDate.value.join('/')}-${endDate.value.join('/')}`
			data.datetimeShow = false
      // console.log(`${startDate.value.join('/')} ${endDate.value.join('/')}`);
    };

		return {
			minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 5, 1),
      endDate,
      startDate,
			data,
			clickCalendar,
			onConfirm,
		};
	}
};
</script>

<template>
	<div class="box">
		<div class="item">
			<van-cell title="只支持上传jpg/png格式的文件" />
			<upload-image :fileType="['jpg','png']" />
		</div>
		<div class="item">
			<van-cell title="只支持上传word/txt格式的文件" />
			<upload-image :fileType="['word','txt']" />
		</div>

		<div class="item">
			<van-cell title="自定义上传区域" />
			<upload-image :fileType="['jpg','png']" :defaultSlot="true" :limit='1'>
				<van-button icon="plus" type="primary">上传文件</van-button>
			</upload-image>
		</div>

		<div class="item">
			<van-cell title="自定义预览区域大小区域" />
			<upload-image :fileType="['png','jpg']" :defaultSlot="true" :preview="['200px','100px']">
				<van-button icon="plus" type="primary">上传文件</van-button>
			</upload-image>
		</div>


		<div class="item">
			<van-cell title="日期范围筛选组件" />
			<van-field readonly v-model="data.selectDate"  placeholder="请选择日期" @click="clickCalendar" />
		</div>
	</div>

	<van-popup
		v-model:show="data.datetimeShow"
		round
		position="bottom"
	>
		<van-picker-group
			title="预约日期"
			:tabs="['开始日期', '结束日期']"
			@cancel="data.datetimeShow = false"
			@confirm="onConfirm"
		>
			<van-date-picker
				v-model="startDate"
				:min-date="minDate"
				:max-date="maxDate"
			/>
			<van-date-picker v-model="endDate" :min-date="minDate" :max-date="maxDate" />
		</van-picker-group>
	</van-popup>
</template>

<style lang="less" scoped>
	.van-cell {
		padding: 0;
	}

	.item {
		margin-bottom: 30px;
	}

	.box {
		padding: 10px 10px;
	}
	.jshdj{
		font-size: 28px;
	}
</style>
